<template>
  <div>

     <myheader></myheader>


		<div id="carousel" class="carousel slide" data-ride="carousel">


			<!--<ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul>-->

			<div class="carousel-inner">

				<!--Text only with background image-->
				<!--<div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div>-->

				<!-- 幻灯片组件 -->
				<Carousel :height="400" :datas="params" @click="click">

				</Carousel>


			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>

		<!--商品排行-->
		<section class="collections text-center ">
			<div class="container-fluid">
				<h3>热门商品</h3>
				<table>
					<tr>
						<th>排行榜</th>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>商品图片</th>
						<th>商品点击量</th>
					</tr>
					<tr v-for="good,index in goodsrank">
						<td  v-html="$options.filters.goodrank(index+1)"></td>
						<td><a >{{ good.name }}</a></td>
						<td>{{ good.price}}</td>
						<td>
							<img :src="src+good.img" width="120px" height="120px">
						</td>
						<td>{{ good.clicks }}</td>
					</tr>
				</table>
			</div>
    	</section>

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4"><b>今日爆款</b></h3>
				<div class="row">

				<!-- 便利商品列表 -->
					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="src+item.img" :href="'/item?id='+item.id"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
						<p v-show='update'><a :href="'/updategoods?id='+item.id">修改</a></p>
					</div>
					<br/>

				</div>
				<!--分页逻辑-->
				<Pagination v-model="pagination" @change="change" layout="pager,jumper"></Pagination><br>
				<!--自主分页-->
				<!--<div>
					<a @click="change_two(lastpage)" v-show="lastpage">上一页</a>
					<ul>
						<li v-for="index in all">
							<a @click="change_two(index)">{{ index }}</a>
						</li>
					</ul>
					<a @click='change_two(nextpage)' v-show="nextpage">下一页</a>

				</div>-->
			</div>
		</section>

		<div class="divider"></div>

		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>

		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>

import myheader from './myheader.vue';
import axios from 'axios'
import {config} from '../config.js'
export default {
  data () {
    return {
      msg: "这是一个变量",
	  // 幻灯片数据
	  params:[
		  {
			  title:'第一张',
			  link:'https://www.baidu.com/',
			  image:'http://127.0.0.1:8000/static/upload/罗峰.png',
		  },
		  {
			  title:'第二张',
			  link:'login',
			  image:'http://q7ad0tx4t.bkt.clouddn.com/Fn-a6JY-bHr4byjvPXEET2qVLkIa',
		  }
	  ],
	  //商品数据
	  datalist:[],
	  //商品图片链接
	  src:'',
	  //分页器变量
	  pagination:{
		  page:1,
		  size:2,
		  total:5
	  },
	  //自主分页
	  total:0,//商品总数
	  page:1,//当前页
	  all:0,//总页数
	  lastpage:0,//上一页
	  nextpage:1,//下一页
	  size:2,//每页的数据量

	  //商品排行榜数据
	  goodsrank:[],

	  update:false,
    }
  },
      //注册组件标签
  components:{
        'myheader':myheader,
    },
  filters:{
    goodrank:function (value) {
      if (value <= 3){
        return '<h3 style="color:red";>'+ value + '</h3>'
      }
      return value
    }
  },
  methods:{
	  //幻灯片点击事件
	  click:function(index,data){
		  console.log(data);
		  //点击后跳转到具体页面
		  window.location.href = data.link;
	  },
	  //获取商品数据+分页器
	  change(){
		  axios.get(config['djurl']+'goodsinfo/',{params:{page:this.pagination.page,
		  		size:this.pagination.size}}).then(res=>{
				// console.log(res)
				this.datalist = res.data.data;
				this.src = config['qiniu'];
				this.pagination.total = res.data.total;
		  })
	  },
	  //获取商品排行
	  get_goodsrank(){
		  axios.get(config['djurl']+'goodsrank/').then(res=>{
			  this.goodsrank = res.data
			//   console.log(this.goodsrank)
		  })
	  }
	  //自主分页
	//   change_two(mypage){
	// 	  axios.get(config['djurl']+'goodsinfo/',{params:{page:mypage,
	// 	  		size:this.size}}).then(res=>{
	// 				this.datalist = res.data.data;
	// 				this.src = config['qiniu'];

	// 				//判断上一页
	// 				if(mypage==1){
	// 					this.lastpage = 0;
	// 				}else{
	// 					this.lastpage = mypage - 1;
	// 				}

	// 				//计算总页数
	// 				this.all = Math.ceil(res.data.total / this.size);

	// 				//判断下一页
	// 				if(mypage==this.all){
	// 					this.nextpage = 0;
	// 				}else{
	// 					this.nextpage = mypage + 1;
	// 				}

	// 	  })
	//   }
  },
  mounted(){
	  //轮播图
	  axios.get('http://127.0.0.1:8000/picslist/').then(res=>{
			  this.mylist = res.data;
			  //  console.log(res.data)

			  var mylist = res.data;
			  var datalist = [];
			  // 将数据遍历后储存到理想格式
			  for(let i=0,l=mylist.length;i<l;i++){
				  datalist.push({title:mylist[i]['title'],link:mylist[i]['link'],image:mylist[i]['img']});
			  }
			  this.params = datalist;
			  //  console.log(this.params)
		  });
		this.change();
		// this.change_two();

		let up = localStorage.getItem('type');
		if (up == 1){
			this.update = true;
		};
		this.get_goodsrank();

	}
}

</script>

<style>



</style>
